<table class="top-bar">
  <tr>
    <td class="top-bar__back" routerLink="/main-screen" matRipple [matRippleUnbounded]="false">
      <img src="assets/back.svg" class="top-bar__back-icon" />back
    </td>
    <td class="top-bar__center">
      <img src="assets/folder.svg" class="top-bar__center-icon" />
    </td>
    <td
      class="top-bar__next"
      (click)="openSorting()"
      matRipple
      [matRippleUnbounded]="false"
      *ngIf="folderContent && folderContent.length > 0"
    >
      sort<img src="assets/sort.svg" class="top-bar__next-icon" />
    </td>
    <td class="top-bar__next" *ngIf="!folderContent || folderContent.length === 0"></td>
  </tr>
</table>
<div class="breadcrumbs">
  <fa-icon [icon]="['fas', 'home']" (click)="openFolder(homeFolder)" class="breadcrumbs__item-home"></fa-icon>
  <span class="breadcrumbs__item" *ngFor="let folder of currentFolder.split('/')">
    <span (click)="openFolder(currentFolder.split(folder)[0] + folder)">
      {{ folder }}
    </span>
  </span>
</div>
<div class="files">
  <ngx-spinner>
    <p class="la-pacman-text">loading ...</p>
  </ngx-spinner>

  <div *ngIf="!folderContent" class="files__error">
    can't load files ...
  </div>

  <div *ngIf="folderContent && currentFolder !== homeFolder && currentFolder !== ''" class="files__object">
    <div
      (click)="openFolder(currentFolder.substr(0, currentFolder.lastIndexOf('/')))"
      matRipple
      [matRippleUnbounded]="false"
    >
      <img src="assets/folder.svg" class="files__icon" />
      <span class="files__name">..</span>
    </div>
  </div>
  <div *ngFor="let content of folderContent" class="files__object">
    <div *ngIf="content.type === 'folder'" (click)="openFolder(content.path)" matRipple [matRippleUnbounded]="false">
      <img src="assets/folder.svg" class="files__icon" />
      <div class="files__info">
        <span class="files__info-value">{{ content.files }}<span class="files__info-unit">files</span></span>
      </div>
      <span class="files__name">
        {{ content.name }}
      </span>
    </div>
    <div
      *ngIf="content.type === 'file'"
      (click)="openDetails(content.path)"
      (press)="loadFile(content.path)"
      matRipple
      [matRippleUnbounded]="false"
    >
      <img src="assets/object.svg" class="files__icon" />
      <div class="files__info">
        <span class="files__info-value">{{ content.size }}<span class="files__info-unit">mb</span></span>
        <span class="files__info-value" *ngIf="content.hasOwnProperty('filamentWeight')"
          >{{ content.filamentWeight }}<span class="files__info-unit">g</span></span
        >
        <span class="files__info-value" *ngIf="content.hasOwnProperty('printTime')"
          >{{ content.printTime }}<span class="files__info-unit">h</span></span
        >
      </div>
      <span class="files__name">
        {{ content.name }}
      </span>
    </div>
  </div>
  <div class="scroll__thumb-inactive" *ngIf="folderContent"></div>
</div>

<div class="file" id="fileDetailView">
  <div class="file__wrapper" *ngIf="fileDetail && fileDetail.name !== 'error'">
    <img src="assets/error.svg" class="file__close" (click)="closeDetails()" />
    <span class="file__name">{{ fileDetail.name }}</span>
    <span class="file__directory">{{ fileDetail.path }}</span>
    <span class="file__creation-date" *ngIf="fileDetail.hasOwnProperty('date')">{{ fileDetail.date }}</span>
    <img [src]="fileDetail.thumbnail" class="file__render" />
    <table class="file__details">
      <tr>
        <td>{{ fileDetail.size }}<span class="file__details-name">mb</span></td>
        <td *ngIf="fileDetail.hasOwnProperty('printTime')">
          {{ fileDetail.printTime }}<span class="file__details-name">h</span>
        </td>
        <td *ngIf="fileDetail.hasOwnProperty('filamentWeight')">
          {{ fileDetail.filamentWeight }}<span class="file__details-name">g</span>
        </td>
      </tr>
    </table>
    <table class="file__actions">
      <tr>
        <td>
          <span matRipple [matRippleUnbounded]="true" [matRippleCentered]="true">
            <img src="assets/upload.svg" class="file__actions-icon" (click)="loadFile(fileDetail.path)" />
          </span>
        </td>
        <td>
          <span matRipple [matRippleUnbounded]="true" [matRippleCentered]="true">
            <img src="assets/print.svg" class="file__actions-icon" (click)="printFile(fileDetail.path)" />
          </span>
        </td>
        <td>
          <span matRipple [matRippleUnbounded]="true" [matRippleCentered]="true">
            <img src="assets/delete.svg" class="file__actions-icon" (click)="deleteFile(fileDetail.path)" />
          </span>
        </td>
      </tr>
    </table>
  </div>
  <div class="file__wrapper file__loading" *ngIf="!fileDetail">
    <img src="assets/error.svg" class="file__close" (click)="closeDetails()" />
    loading details ...
  </div>
  <div class="file__wrapper file__loading" *ngIf="fileDetail && fileDetail.name === 'error'">
    <img src="assets/error.svg" class="file__close" (click)="closeDetails()" />
    can't load file.
  </div>
</div>

<div class="sorting" id="sortingView" *ngIf="showSorting">
  <div class="sorting-wrapper">
    <img src="assets/error.svg" class="sorting-close" (click)="closeSorting()" />
    <span class="sorting-heading">sort files</span>
    <table class="sorting-selection">
      <tr>
        <td>
          <span style="font-size: 2.9vw;">sort by</span> <br />
          <div class="sorting__checkbox-container" (click)="sortingAttribute = 'name'">
            <span class="sorting__checkbox">
              <span class="sorting__checkbox-checked" *ngIf="sortingAttribute === 'name'"></span>
            </span>
            <span class="sorting__checkbox-descriptor">Name</span>
          </div>
          <br />
          <div class="sorting__checkbox-container" (click)="sortingAttribute = 'date'">
            <span class="sorting__checkbox">
              <span class="sorting__checkbox-checked" *ngIf="sortingAttribute === 'date'"></span>
            </span>
            <span class="sorting__checkbox-descriptor">Date</span>
          </div>
          <br />
          <div class="sorting__checkbox-container" (click)="sortingAttribute = 'size'">
            <span class="sorting__checkbox">
              <span class="sorting__checkbox-checked" *ngIf="sortingAttribute === 'size'"></span>
            </span>
            <span class="sorting__checkbox-descriptor">Size</span>
          </div>
          <br />
        </td>
        <td>
          <span style="font-size: 2.9vw;">order</span> <br />
          <div class="sorting__checkbox-container" (click)="sortingOrder = 'asc'">
            <span class="sorting__checkbox">
              <span class="sorting__checkbox-checked" *ngIf="sortingOrder === 'asc'"></span>
            </span>
            <span class="sorting__checkbox-descriptor">Ascending</span>
          </div>
          <br />
          <div class="sorting__checkbox-container" (click)="sortingOrder = 'dsc'">
            <span class="sorting__checkbox">
              <span class="sorting__checkbox-checked" *ngIf="sortingOrder === 'dsc'"></span>
            </span>
            <span class="sorting__checkbox-descriptor">Descending</span>
          </div>
          <br />
        </td>
      </tr>
    </table>
  </div>
</div>
